<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

        /* 將class為red的元素設置為紅色的字體 */
    .red{
        color: red;
    }
        /* 將class為red的div字體大小設置為30px */
   
   
   /* 
            交集選擇器
                作用:選中同時複用多個條件的元素
                語法:選擇器1選擇器2選擇器3選擇器n{}
                注意:
                    交集選擇器中如果有元素選擇器,必須使用元素選擇器開頭
   */
        div.red{
       font-size: 30px;

   }

   .a.b.c{

    color: rosybrown;
   }


   /* 
   選擇器分組(並集選擇器)
        作用:同時選中多個選擇器對應的元素
        語法:選擇器1,選擇器2,選擇器3,選擇器n{}
   */
   h1,span{
       color: skyblue;
   }
   

   </style>
   
    <title>Document</title>
</head>
<body>

    <div class="red">我是什麼牛馬</div>

    <P class="red">我說我是什麼牛馬</P>
    <P class="red">我說我是什麼牛馬</P>
    <P class="red">我說我是什麼牛馬</P>
    <P class="a b c">我說我是什麼牛馬</P>
</body>
</html>